#include("_user_detail_layout.html")
#@user_detail_layout("detail-tag")

#define layout_script()
<script src="#(CPATH)/static/components/selectize/selectize.min.js"></script>
<script>
    var $select = $('.article-tags').selectize({
        plugins: ['remove_button'],
        delimiter: ',',
        persist: false,
        addPrecedence: true,
        create: true,
        render: {
            option_create: function (data, escape) {
                return '<div class="create" style="padding-left: 5px"> 添加标签：<strong style="color: #DD1144">' + escape(data.input) + '</strong></div>';
            }
        }
    });


    $(".newTag").each(function () {
        $(this).on('click', function () {
            $select[0].selectize.createItem($(this).text());
        })
    });



</script>
#end

#define layout_css()
<link href="#(CPATH)/static/components/selectize/css/selectize.css" rel="stylesheet">
#end


#define detail()

<!-- /.card-header -->
<!-- form start -->
<form class="" autocomplete="off" id="userForm" action="#(CPATH)/admin/user/doUpdateUserTags">
    <input name="userId" type="hidden" value="#(user.id)">
    <div class="card-body">

        <h4 class="form-header">用户标签</h4>

        <div class="form-group row">
            <label class="col-sm-2 col-form-label"></label>
            <div class="col-sm-6">
                <select class="article-tags" multiple="multiple" name="tag">
                    #for(tag : userTags)
                    <option value="#(tag.title ??)" selected>#(tag.title ??)</option>
                    #end
                </select>
                <p class="text-muted">多个标签请用 “回车键” 或英文逗号（,）隔开。</p>

                <div class="tags">
                    #for(tag : hotTags)
                    <a href="javascript:;" class="newTag">#(tag.title)</a>
                    #end
                </div>
            </div>
        </div>


    </div>

    <div class="card-footer">
        <div class="offset-sm-2 col-sm-10 submit-block">
            <div class="card-submit">
                <button type="submit" class="btn btn-primary">提交</button>
            </div>
        </div>
    </div>

</form>
#end

